<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
    <script type="text/javascript" >
        /* * 需 求 ： 当 用 户 点 击 了 较 验 按 钮 ， 要 获 取 输 出 框 中 的 内 容 。 然 后 验 证 其 是 否 合 法 。 <br/>
        * 验 证 的 规 则 是 ： 必 须 由 字 母 ， 数 字 。 下 划 线 组 成 。 并 且 长 度 是 5 到 12 位 。 * */
        function onclickFun() {
            // 1 当 我 们 要 操 作 一 个 标 签 的 时 候 ， 一 定 要 先 获 取 这 个 标 签 对 象 。
            var usernameObj = document.getElementById("username");
            // [object HTMLInputElement] 它 就 是 dom 对 象
            var usernameText = usernameObj.value;
            // 如 何 验 证 字 符 串 ， 符 合 某 个 规 则 ， 需 要 使 用 正 则 表 达 式 技 术
            var patt = /^\w{5,12}$/;
            /* * test() 方 法 用 于 测 试 某 个 字 符 串 ， 是 不 是 匹 配 我 的 规 则 ，
            * 匹 配 就 返 回 true 。 不 匹 配 就 返 回 false. * */
            var usernameSpanObj = document.getElementById("usernameSpan");
            // innerHTML 表 示 起 始 标 签 和 结 束 标 签 中 的 内 容
            // innerHTML 这 个 属 性 可 读 ， 可 写
            usernameSpanObj.innerHTML = "国哥真可爱！";
            if (patt.test(usernameText)) { // alert(" 用 户 名 合 法 ！ "); //
                usernameSpanObj.innerHTML = " 用 户 名 合 法 ！ ";
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else { //
                alert(" 用 户 名 不 合 法 ！ ");
                usernameSpanObj.innerHTML = " 用 户 名 不 合 法 ！ ";
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">"; }
            }
    </script>
</head>
<body>
用户名：<input type="text" id="username" value="wzg"/>
<span id="usernameSpan" style="color:red;"></span>
<button onclick="onclickFun()">较验</button>
</body>
</html>